<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贷款计算器</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<table>
    <tr>
        <th>Enter loan Data:</th>
        <td></td>
        <th>Loan Balance,Cumulative Equity,and Interest Payments</th>
    </tr>
    <tr>
        <td>Amount of the loan($):</td>
        <td>
            <input id="amount" onchange="calculate();"/>
        </td>
        <td rowspan="8">
            <canvas id="graph" width="400" height="250"></canvas>
        </td>
    </tr>
    <tr>
        <td>Annual interest(%):</td>
        <td>
            <input id="apr" onchange="alculate();"/>
        </td>
    </tr>
    <tr>
        <td>Repayment period(years):</td>
        <td>
            <input id="years" onchange="alculate();">
        </td>
    </tr>
    <tr>
        <td>Zipcode(to find lenders):</td>
        <td>
            <input id="zipcode" onchange="alculate();">
        </td>
    </tr>
    <tr>
        <td>Approximate Payments:</td>
        <td>
            <button onclick="calculate();">Calculate</button>
        </td>
    </tr>
    <tr>
        <td>Monthly Payments:</td>
        <td>
            $<span class="output" id="payment"></span>
        </td>
    </tr>
    <tr>
        <td>Total Payments:</td>
        <td>
            $<span class="output" id="total"></span>
        </td>
    </tr>
    <tr>
        <td>Total interest:</td>
        <td>
            $<span class="output" id="totalinterest"></span>
        </td>
    </tr>
    <tr>
        <th>Sponsors:</th>
        <td colspan="2">
            Apply for your loan with one of these fine lenders:
            <div id="lenders">
            </div>
        </td>
    </tr>
</table>
<script src="js/index.js"></script>
</body>
</html>